<template>
  <div>
    <div v-if="!records||!records.length">当前流程暂时没有历史记录</div>
    <el-steps v-else direction="vertical" :active="records.length">
      <el-step v-for="record in records" :key="record.id">
        <template #title>
          <el-tooltip>
            <template #content>
              <div>起算时间：{{ parseTime(record.recordTime) }}</div>
              <div>创建时间{{ parseTime(record.create) }}</div>
            </template>
            <span>{{ formatTime(record.recordTime) }}</span>
          </el-tooltip>
        </template>
        <template #description>
          <MarkdownViewer v-waves :content="record.content" />
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import { formatTime, parseTime } from '@/utils'
import waves from '@/directive/waves'
export default {
  name: 'History',
  components: {
    MarkdownViewer: () => import('@/components/MarkdownEditor/Viewer')
  },
  directives: {
    waves
  },
  props: {
    records: { type: Array, default: null }
  },
  methods: {
    formatTime,
    parseTime
  }
}
</script>
